<template>
  <div>
    <div class="base_header" style="text-align: left;margin-bottom: 20px">
      <span style="font-size: 30px;font-weight: normal;">
        教师认证
      </span>
      <span style="font-size: 10px">网站教师认证管理</span>

    </div>
    <div>
      <el-table
        :data="approveList"
        style="width: 100%">
        <el-table-column
          label="序号"
          width="80">
          <template slot-scope="scope">
          <span>
            {{scope.$index + 1 +  (page - 1) * pageSize}}
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称">
        </el-table-column>
        <el-table-column
          prop="office"
          label="认证头衔">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="申请时间">
        </el-table-column>
        <el-table-column label="认证状态">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.state === 1">待认证</el-tag>
            <el-tag type="success" v-if="scope.row.state === 2">通过</el-tag>
            <el-tag type="danger" v-if="scope.row.state === 3">未通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button
                size="mini"
                slot="reference"
                type="primary"
                @click="toView(scope.row)"
              >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination" style="text-align: center">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :hide-on-single-page="true"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      title="确认不通过？"
      :visible.sync="noShow"
      width="30%">
      <div>
        <el-form label-position="left" label-width="10%">
          <el-form-item label="原因">
            <el-input type="textarea"
                      v-model="failData.message"
                      rows="4"
                      style="width: 80%"
                      maxlength="100"
                      show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toShenheFail(failData.approveId)">确 定</el-button>
      </span>
    </el-dialog>
    <el-drawer
      style="margin-top: 30px"
      title="认证详情"
      :visible.sync="dialogVisible"
      :with-header="true">
      <div style="padding:0px 20px">
        <el-form v-model="approveObj" label-position="left" label-width="100px">
          <el-form-item label="认证编号">
            <el-input v-model="approveObj.approveId"
                      :disabled="true">
            </el-input>
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input v-model="approveObj.userId"
                      :disabled="true">
            </el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="approveObj.nickname" type="text" v-if="type">
            </el-input>
            <el-input v-model="approveObj.nickname" type="text"
                      :disabled="true" v-else>
            </el-input>
          </el-form-item>
          <el-form-item label="认证头衔">
            <el-input v-model="approveObj.office" type="text" v-if="type">
            </el-input>
            <el-input v-model="approveObj.office" type="text"
                      :disabled="true" v-else>
            </el-input>
          </el-form-item>
          <el-form-item label="往期作品">
            <el-input v-model="approveObj.work" type="text" v-if="type">
            </el-input>
            <el-input v-model="approveObj.work" type="text"
                      :disabled="true" v-else>
            </el-input>
          </el-form-item>
          <el-form-item label="认证资料">
            <div style="display: inline-block;width: 300px;height: 180px">
              <el-image
                style="width: 100%; height: 100%"
                :src="approveObj.imageUrl"
                :preview-src-list="[approveObj.imageUrl]"
                fit="fill"></el-image>
            </div>
          </el-form-item>
          <el-form-item label="认证状态" v-if="!type">
            <el-tag type="success" v-if="approveObj.state === 2">通过</el-tag>
            <el-tag type="danger" v-if="approveObj.state === 3">未通过</el-tag>
          </el-form-item>
          <el-form-item label="拒绝原因" v-if="approveObj.state === 3">
            <el-input type="textarea"
                      v-model="approveObj.message"
                      :disabled="true"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: right" v-if="type">
          <el-popconfirm
            title="确定通过吗？"
            @onConfirm="toShenheSuccess(approveObj.approveId)" >
            <el-button type="success"
                       slot="reference">通过</el-button>
          </el-popconfirm>
          <el-popconfirm
            title="确定不通过吗？"
            @onConfirm="failFun(approveObj.approveId)" >
            <el-button type="danger"
                       slot="reference">不通过</el-button>
          </el-popconfirm>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'UserApprove',
  data () {
    return {
      queryData: {
        roleId: 0
      },
      failData: {
      },
      approveList: [],
      roleList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      type: false,
      dialogVisible: false,
      noShow: false,
      approveObj: {
      }
    }
  },
  mounted () {
    this.getAllRole()
    this.toGet()
  },
  methods: {
    // 下方分页点击
    handleCurrentChange (page) {
      this.page = page
      this.getListApprove(page, this.pageSize)
    },
    getAllRole () {
      var _this = this
      this.$axios.post('/api/role/getAllRole')
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.roleList = JSON.parse(JSON.stringify(result.result))
          }
        })
    },

    getSizeApprove () {
      var _this = this
      this.$axios.post('/api/user/getSizeApprove')
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.total = result.result
          }
        })
    },
    getListApprove (page, pageSize) {
      var _this = this
      var queryData = {}
      queryData.page = page
      queryData.pageSize = pageSize
      this.$axios.post('/api/user/getListApprove',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.approveList = result.result
          }
        })
    },
    toGet () {
      this.getSizeApprove()
      this.getListApprove(1, this.pageSize)
    },
    toView (row) {
      if (row.state === 2 || row.state === 3) {
        this.type = false
      } else {
        this.type = true
      }
      this.getDetailApprove(row.approveId)
    },
    toResetImage () {
      this.userObj.imageUrl = 'http://cdn.404zz.cn/course/image/20200507233648FTHCVH.jpg'
    },
    getDetailApprove (approveId) {
      var _this = this
      this.$axios.post('/api/user/getDetailApprove',
        this.$qs.stringify({
          approveId: approveId
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.approveObj = JSON.parse(JSON.stringify(result.result))
            _this.dialogVisible = true
          } else {
            _this.$message({
              type: 'error',
              message: '获取详情失败，请重试'
            })
          }
        })
    },
    failFun (approveId) {
      this.noShow = true
      this.failData.approveId = approveId
    },
    toShenheSuccess (approveId) {
      var approveData = {}
      approveData.approveId = approveId
      approveData.state = 2
      this.updateApprove(approveData)
    },
    toShenheFail (approveId) {
      var approveData = {}
      approveData.approveId = approveId
      approveData.state = 3
      approveData.message = this.failData.message
      this.updateApprove(approveData)
    },
    updateApprove (approveData) {
      var _this = this
      this.$axios.post('/api/user/updateApprove',
        this.$qs.stringify({
          approveData: JSON.stringify(approveData)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.$message({
              type: 'success',
              offset: 50,
              message: '成功！'
            })
            _this.toRef()
          } else {
            _this.$message({
              type: 'error',
              offset: 50,
              message: '失败，请重试'
            })
          }
        })
    },
    toRef () {
      this.noShow = false
      this.dialogVisible = false
      this.getSizeApprove()
      this.getListApprove(this.page, this.pageSize)
    },
    randomString (len) {
      len = len || 12
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      // /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var pwd = ''
      for (var i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    }
  }
}
</script>

<style scoped>

</style>
